<template>
  <div class="report">
    <div id="headcharts"></div>
    <div class="footercharts">
      <div id="rightcharts"></div>
      <div id="middlecharts"></div>
      <div id="leftcharts"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headertitle: "",
      library: [],
      headdata:[
        ["2021-02~2021-03", 116],
        ["2021-03~2021-04", 129],
        ["2021-04~2021-05", 135],
        ["2021-05~2021-06", 86],
        ["2021-06~2021-07", 73],
        ["2021-07~2021-08", 85],
     
      ],
    };
  },
  methods: {
  init(){
 if (this.$route.params.value == "report-examine") {
        this.$http.get('/apply/count').then((result) => {
          console.log(result.data);
          for (var index in result.data) {
            // console.log(this.headdata[index][1]);
            // console.log(index);
            // console.log( result.data[index]);
            this.headdata[index][1]=result.data[index]
            this.draw()
          }
        }).catch((err) => {
          console.log(err);
        });

      }
      if (this.$route.params.value == "report-three") {
                this.$http.get('/three/count').then((result) => {
          console.log(result.data);
          for (var index in result.data) {
            // console.log(this.headdata[index][1]);
            // console.log(index);
            // console.log( result.data[index]);
            this.headdata[index][1]=result.data[index]
            this.draw()
          }
        }).catch((err) => {
          console.log(err);
        });
      }
      if (this.$route.params.value == "report-five") {
                this.$http.get('/five/count').then((result) => {
          console.log(result.data);
          for (var index in result.data) {
            // console.log(this.headdata[index][1]);
            // console.log(index);
            // console.log( result.data[index]);
            this.headdata[index][1]=result.data[index]
            this.draw()
          }
        }).catch((err) => {
          console.log(err);
        });
      }
    
  },
    draw() {
      if (this.$route.params.value == "report-examine") {
        
        this.headertitle = "近六月申报项目数";
      }
      if (this.$route.params.value == "report-three") {
        this.headertitle = "近六月入库项目数";
      }
      if (this.$route.params.value == "report-five") {
        this.headertitle = "近六月入库项目数";
      }
      var echarts = require("echarts");
      var chartDom = document.getElementById("headcharts");
      var myChart = echarts.init(chartDom);
      var option;
      var data =this.headdata ;

      var dateList = data.map(function (item) {
        return item[0];
      });
      var valueList = data.map(function (item) {
        return item[1];
      });

      option = {
        visualMap: {
          show: false,
          type: "continuous",
          seriesIndex: 0,
          min: 0,
          max: 50,
        },
        title: {
          left: "center",
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: dateList,
        },
        yAxis: {},
        grid: {},
        series: {
          type: "line",
          showSymbol: false,
          data: valueList,
        },
      };

      option.title.text = this.headertitle;
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.draw();
  },
  created() {
   this.init()
  },
  watch: {
    $route: "init",
    // headdata:'draw'
  },
};
</script>

<style >
/* .report{

} */
#headcharts {
  width: 100%;
  height: 520px;
  background-color: white;
}
</style>